﻿@model WSS.hameduconn.Business.Dto.RegistrationsDto

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>UserInfo</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
        <script src="~/Scripts/jquery-1.10.2.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

        <link href="~/Styles/bootstrap-datetimepicker-0.0.11/css/datepicker.css" rel="stylesheet" />
        <script src="~/Scripts/bootstrap-datetimepicker-0.0.11/js/bootstrap-datepicker.js"></script>
    </head>
    <body>
        <style>
            .col-md-3 {
                width: 20%;
            }

            .margin-bottom-15 {
                margin-bottom: 15px;
            }
        </style>

        <div>
            <div class="container">
                <div id="signupbox" style="margin-top:50px; width: 70%;" class="mainbox col-md-6 col-sm-8 col-sm-offset-2">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <div class="panel-title">Create new account</div>
                        </div>
                        <div class="panel-body">
                            <form class="form-horizontal" role="form">
                                @Html.HiddenFor(model => model.Id)
                                <div class="form-group">
                                    <label for="email" class="col-md-3 control-label" style="width: 18.6%;">Username</label>
                                    <div class="col-md-9" style="width: 77.6%;">
                                        @Html.TextBoxFor(model => model.Username, new { @class = "form-control" })
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="email" class="col-md-3 control-label" style="width: 18.6%;">Password</label>
                                    <div class="col-md-9" style="width: 77.6%;">
                                        @Html.TextBoxFor(model => model.Password, new { @class = "form-control" })
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-md-12" style="width: 100%;">
                                        <hr />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="firstname" class="col-md-3 control-label" style="width: 18.6%;">First Name</label>
                                    <div class="col-md-9" style="width: 77.6%;">
                                        @Html.TextBoxFor(model => model.FirstName, new { @class = "form-control" })
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="lastname" class="col-md-3 control-label" style="width: 18.6%;">Last Name</label>
                                    <div class="col-md-9" style="width: 77.6%;">
                                        @Html.TextBoxFor(model => model.LastName, new { @class = "form-control" })
                                    </div>
                                </div>
                                <div class="col-md-6 margin-bottom-15">
                                    <label for="email" class="col-md-4 control-label">Email</label>
                                    <div class="col-md-8">
                                        @Html.TextBoxFor(model => model.Email, new { @class = "form-control" })
                                    </div>
                                </div>

                                <div class="col-md-6 margin-bottom-15">
                                    <label for="icode" class="col-md-4 control-label">Street</label>
                                    <div class="col-md-8">
                                        @Html.TextBoxFor(model => model.Street, new { @class = "form-control" })
                                    </div>
                                </div>
                                <div class="col-md-6 margin-bottom-15">
                                    <label for="icode" class="col-md-4 control-label">City</label>
                                    <div class="col-md-8">
                                        @Html.TextBoxFor(model => model.City, new { @class = "form-control" })
                                    </div>
                                </div>
                                <div class="col-md-6 margin-bottom-15">
                                    <label for="icode" class="col-md-4 control-label">State</label>
                                    <div class="col-md-8">
                                        @Html.TextBoxFor(model => model.State, new { @class = "form-control" })
                                    </div>
                                </div>
                                <div class="col-md-6 margin-bottom-15">
                                    <label for="icode" class="col-md-4 control-label">ZipCode</label>
                                    <div class="col-md-8">
                                        @Html.TextBoxFor(model => model.ZipCode, new { @class = "form-control" })
                                    </div>
                                </div>
                                <div class="col-md-6 margin-bottom-15">
                                    <label for="icode" class="col-md-4 control-label" style="padding-left: 0;">CreditCardNo</label>
                                    <div class="col-md-8">
                                        @Html.TextBoxFor(model => model.CreditCardNo, new { @class = "form-control" })
                                    </div>
                                </div>
                                <div class="col-md-6 margin-bottom-15">
                                    <label for=" icode" class="col-md-4 control-label" style="padding-left: 0;">
                                        ExpirationDate
                                    </label>
                                    <div class="col-md-8">
                                        @*<input class="datepicker form-control" data-date-fomat="mm/dd/yyyy" />*@
                                        @Html.TextBoxFor(model => model.ExpirationDate, new { @class = "datepicker form-control" })
                                        @Html.HiddenFor(model => model.ExpirationDate)                                        
                                    </div>
                                </div>
                                <div class="col-md-6 margin-bottom-15">
                                    <label for=" icode" class="col-md-4 control-label">
                                        CVS
                                    </label>
                                    <div class="col-md-8">
                                        @Html.TextBoxFor(model => model.CVS, new { @class = "form-control" })
                                    </div>
                                </div>

                                <div class="form-group">
                                    <!-- Button -->
                                    <div class="col-md-12 text-right" style="padding-right: 6%;">
                                        <button id="btn-create" type="button" class="btn btn-info"><i class="icon-hand-right"></i>Update</button>
                                        <button id="btn-reset" type="button" class="btn btn-info"><i class="icon-hand-right"></i>Reset</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </body>
    <script>
        $(function () {
            $('.datepicker').datepicker();

            function checkedDataRegistration() {
                var flag = true;
                if (!$.trim($('#Username').val())) {
                    $('#Username').attr('placeholder', 'Username is required');
                    flag = false;
                }
                if (!$.trim($('#Password').val())) {
                    $('#Password').attr('placeholder', 'Pasword is required');
                    flag = false;
                }
                if (!$.trim($('#FirstName').val())) {
                    $('#FirstName').attr('placeholder', 'Pasword is required');
                    flag = false;
                }
                if (!$.trim($('#LastName').val())) {
                    $('#LastName').attr('placeholder', 'Pasword is required');
                    flag = false;
                }
                return flag;
            }

            $('#btn-create').click(function () {
                if (checkedDataRegistration()) {
                    $('#ExpirationDate').val($('.datepicker').val());
                    document.forms[0].action = '@Url.Content("~/Home/UpdatedUser")';
                    document.forms[0].method = 'post';
                    document.forms[0].submit();
                }
            });

        });

    </script>
</html>
